<template>
<div class="hd steps-wrapper">
  <div class="steps">
    <span :class="stepClass[i]" v-for="(t,i) in text" :key="t"><i>{{'0'+(i+1)}}</i>{{t}}</span>
  </div>
  </div>
</template>

<script>
export default {
  props: {
    step: {
      default: 0
    },
    text: {
      default () {
        return ['选择科室医生', '确认信息', '缴费', '预约成功']
      }
    }
  },
  computed: {
    stepClass () {
      let temp = []
      if (!this.step) this.step = 0
      this.text.forEach((v, i) => {
        if (i === 0 && this.step === i) {
          temp.push('active1')
        } else if (i > 0 && this.step === i) {
          temp.push('active')
        } else {
          temp.push('')
        }
      })
      return temp
    }
  }
}
</script>

<style lang="less">
.steps-wrapper {
  padding-bottom: 20px;
  background: #fff;
}
.steps {
  background: #F9D9B7;
  overflow: auto;
  padding-left: 20px;
  span{
    display: block;
    float: left;
    margin-left: -21px;
    width: 175px;
    height: 32px;
    background: url(../assets/global.png) no-repeat 0 -198px;
    font-size: 14px;
    color: #A4381E;
    line-height: 32px;
    padding-left: 30px;
    i {
      font-size: 18px;
      margin-right: 10px;
      font-weight: bold;
    }
    &.active{
      background-position-y: -166px;
      color: #fff;
    }
    &.active1{
      background-position-y: -230px;
      color: #fff;
    }
  }
}
</style>
